import { useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { LeftOutline, MoreOutline, EyeOutline, UserOutline } from 'antd-mobile-icons'
import Nabar from '../../conpoment/Nabar'
import styles from './index.module.css'
import { Avatar, Button } from 'antd-mobile'

function RegistrationDetail() {
  const navigate = useNavigate()
  const location = useLocation()
  
  // 从路由参数或location.state获取挂号信息
  const registrationData = location.state || {
    patientName: '王小柯',
    registrationNumber: '2015******10',
    doctorName: '刘医生',
    doctorTitle: '主任医师',
    doctorAvatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.WJlM1ncsKLaS1d99La0ErwHaHa?w=176&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2',
    hospital: '四川省保健院南苑',
    department: '门诊外一科',
    registrationFee: 66.00,
    appointmentDate: '2020-01-27',
    appointmentTime: '08:30-12:00',
    timeSlot: '上午',
    departmentAddress: '门诊一部五层C区203诊室'
  }

  const handleBack = () => {
    navigate(-1)
  }

  const handleCancelRegistration = () => {
    console.log('取消挂号')
    // 这里可以处理取消挂号逻辑
    // 成功后可以跳转回首页或医生列表
    navigate('/home')
  }

  return (
    <div className={styles.page}>
      <Nabar title='挂号详情' sticky={false} />
      
      <div className={styles.content}>
        {/* 提示信息 */}
        <div className={styles.alertBanner}>
          该挂号订单还未就诊,请按预约时间及时就诊
        </div>

        {/* 挂号成功状态 */}
        <div className={styles.statusCard}>
          <div className={styles.successIcon}>
            <div className={styles.checkmark}>✓</div>
          </div>
          <div className={styles.statusText}>挂号成功</div>
        </div>

        {/* 挂号详情信息 */}
        <div className={styles.detailCard}>
          <div className={styles.detailItem}>
            <span className={styles.label}>就诊人</span>
            <span className={styles.value}>{registrationData.patientName}</span>
          </div>
          <div className={styles.detailItem}>
            <span className={styles.label}>登记号</span>
            <span className={styles.value}>{registrationData.registrationNumber}</span>
          </div>
          <div className={styles.detailItem}>
            <span className={styles.label}>挂号医生</span>
            <div className={styles.doctorInfo}>
              <Avatar src={registrationData.doctorAvatar} className={styles.doctorAvatar} />
              <span className={styles.doctorName}>
                {registrationData.doctorName} ({registrationData.doctorTitle})
              </span>
            </div>
          </div>
          <div className={styles.detailItem}>
            <span className={styles.label}>就诊医院</span>
            <span className={styles.value}>{registrationData.hospital}</span>
          </div>
          <div className={styles.detailItem}>
            <span className={styles.label}>挂号科室</span>
            <span className={styles.value}>{registrationData.department}</span>
          </div>
          <div className={styles.detailItem}>
            <span className={styles.label}>挂号费用</span>
            <span className={styles.feeValue}>¥ {registrationData.registrationFee.toFixed(2)}</span>
          </div>
          <div className={styles.detailItem}>
            <span className={styles.label}>预约时间</span>
            <span className={styles.value}>
              {registrationData.appointmentDate} {registrationData.appointmentTime}({registrationData.timeSlot})
            </span>
          </div>
        </div>

        {/* 科室地址 */}
        <div className={styles.addressCard}>
          <div className={styles.addressLabel}>科室地址</div>
          <div className={styles.addressValue}>{registrationData.departmentAddress}</div>
        </div>
      </div>

      {/* 底部取消挂号按钮 */}
      <div className={styles.bottomButton}>
        <Button 
          block 
          size='large'
          onClick={handleCancelRegistration}
          className={styles.cancelBtn}
        >
          取消挂号
        </Button>
      </div>
    </div>
  )
}

export default RegistrationDetail
